<template>
  <Top-Page ref="ref_index" class="index-box" :amplifiedBase="amplifiedBase">
    <view class="decorate-bg" v-show="PageName == '消息'">
      <view class="decorate-bg-1"></view>
      <view class="decorate-bg-2"></view>
    </view>

    <view
      class="index-nav"
      v-show="PageName != '我的'"
      :class="[
        {
          'novice-guide-location-1': !noviceGuide.includes(1) || !noviceGuide.includes(2)
        },
        {
          'index-nav-bg': PageName == '消息'
        },
        {
          'txl-nav-bg': PageName == '通讯录'
        }
      ]"
    >
      <view v-if="PageName == '通讯录'" style="text-align: left; padding-left: 48rpx" class="nav-left-info fs-40">
        通讯录
      </view>
      <view v-if="PageName == '消息'" class="nav-left-info fs-32">消息</view>
      <view v-if="PageName == '发现'" class="nav-left-info fs-40">发现</view>

      <view class="nav-right" v-if="PageName != '发现'">
        <image
          v-if="PageName == '通讯录'"
          class="w-52 h-52 mr-30"
          src="/static/image/common/search.png"
          mode=""
          @tap="toSearch()"
        ></image>
        <image
          :class="{
            'novice-guide-operate': !noviceGuide.includes(2) && noviceGuide.includes(1)
          }"
          class="w-48 h-48"
          src="/static/image/common/b-add.png"
          mode=""
          @tap="addModelName()"
        ></image>
      </view>
    </view>
    <view
      v-if="PageName == '消息'"
      :class="['search-wrap', { 'novice-guide-location-2': !noviceGuide.includes(1) }]"
      @tap="search()"
    >
      <view
        :class="['search-content radius-8 flex justify-center', { 'novice-guide-operate': !noviceGuide.includes(1) }]"
      >
        <text class="cuIcon-search f-14"></text>
        <view class="search-wrap-text">搜索</view>
      </view>
    </view>
    <view>
      <message v-if="PageCur == 'message'"></message>
      <contacts v-if="PageCur == 'contacts'" :TabCur="TabCur"></contacts>
      <!-- <compass v-if="PageCur == 'compass'"></compass> -->
      <mine v-if="PageCur == 'mine'"></mine>
      <discover v-if="PageCur == 'discover'"></discover>
    </view>

    <view :class="['cu-bar', 'tabbar', 'bg-white', 'shadow', 'foot', { 'novice-guide-location': !isFullyContained }]">
      <view
        v-for="(item, index) in navList"
        @click="NavChange(item, index + 3)"
        :class="['action', step(index + 3) && !isFullyContained ? 'novice-guide-operate' : 'novice-guide-operate__zz']"
        :key="index"
        data-cur="message"
      >
        <view class="cuIcon-cu-image">
          <image
            :src="'/static/image/tabbar/' + [item.name] + [PageCur == item.name ? '-active' : ''] + '.png'"
          ></image>
          <view class="cu-tag badge" v-if="item.notice > 0">{{ item.notice }}</view>
        </view>
        <view :class="[PageCur == item.name ? 'nav-text-1' : 'nav-text-2']">
          {{ item.title }}
        </view>
      </view>
    </view>
    <view class="cu-modal bottom-modal" :class="modelName == 'add' ? 'show' : ''" @tap="modelName = ''">
      <!-- cu-dialog -->
      <view class="cu-dialog-wrap">
        <view class="manage-content">
          <view class="cu-list menu">
            <view class="cu-item" @tap="initContacts()">
              <view class="content padding-tb-sm more-list">
                <image src="/static/image/common/a1.png" mode=""></image>
                <text class="fs-30" style="margin-left: 18rpx">更新列表</text>
              </view>
            </view>
            <view class="cu-item" @tap="addFriend()" v-if="globalConfig.sysInfo?.runMode == 2">
              <view class="content padding-tb-sm more-list">
                <image src="/static/image/common/a2.png" mode=""></image>
                <text class="fs-30" style="margin-left: 18rpx">添加朋友</text>
              </view>
            </view>
            <view class="cu-item" @tap="addGroup()">
              <view class="content padding-tb-sm more-list">
                <image src="/static/image/common/a3.png" mode=""></image>
                <text class="fs-30" style="margin-left: 18rpx">创建群聊</text>
              </view>
            </view>
            <view class="cu-item" @tap="scan()">
              <view class="content padding-tb-sm more-list">
                <image src="/static/image/common/a4.png" mode=""></image>
                <text class="fs-30" style="margin-left: 18rpx">扫 一 扫</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="cu-dialog-hint" v-if="!noviceGuide.includes(3)">
        <view class="cu-dialog-hint-tiem">更新您的好友列表</view>
        <view class="cu-dialog-hint-tiem">添加您的朋友</view>
        <view class="cu-dialog-hint-tiem">创建您和您朋友的群聊</view>
        <view class="cu-dialog-hint-tiem">扫码</view>
      </view>
    </view>

    <view class="novice-guide-location-box-1" v-if="!noviceGuide.includes(1) || !noviceGuide.includes(2)">
      <template v-if="!noviceGuide.includes(1)">
        <view class="novice-guide-title">搜索</view>
        <view class="novice-guide-text">点击搜索输入您想查找的内容，即可出现在您面前，再也不怕找不到了。</view>
      </template>
      <template v-else-if="!noviceGuide.includes(2)">
        <view class="novice-guide-title">加号</view>
        <view class="novice-guide-text">添加身边好友，创建兴趣群聊，您想要的都在这里哦~</view>
      </template>
    </view>
    <view class="novice-guide-location-box" v-else>
      <template v-if="!noviceGuide.includes(3)">
        <view class="novice-guide-title">聊天窗口</view>
        <view class="novice-guide-text">我们提供语音通话、视频通话、聊天等多种沟通方式，让您的交流更加流畅</view>
      </template>
      <template v-else-if="!noviceGuide.includes(4)">
        <view class="novice-guide-title">人脉圈</view>
        <view class="novice-guide-text">
          点击“人脉圈”，进入人脉圈界面，然后点击右上角的相机图标，就可以发表朋友圈啦！想分享生活点滴，就这么简单！
        </view>
      </template>
      <template v-else-if="!noviceGuide.includes(5)">
        <view class="novice-guide-title">发现</view>
        <view class="novice-guide-text">更多新功能敬请期待！</view>
      </template>
      <template v-else-if="!noviceGuide.includes(6)">
        <view class="novice-guide-title">通讯录</view>
        <view class="novice-guide-text">
          进入通讯录之后可查看到当前通讯录中存储的联系人，点击联系人姓名，可查看电话号码以及相关联系方式。
        </view>
      </template>
      <template v-else-if="!noviceGuide.includes(7)">
        <view class="novice-guide-title">个人中心</view>
        <view class="novice-guide-text">进入个人中心，您的信息都在这里哦~</view>
      </template>
    </view>
    <view class="novice-guide-box" v-if="!isFullyContained"></view>

    <!-- 推荐 共同好友 -->
    <recommend-dialog />
  </Top-Page>
</template>

<script>
import message from "@/pages/message";
import contacts from "@/pages/contacts";
import discover from "@/pages/discover";
// import compass from '@/pages/compass';
import mine from "@/pages/mine";
import { storeToRefs } from "pinia";
import { useMsgStore } from "@/store/message";
import { useloginStore } from "@/store/login";
import pinia from "@/store/index";
import scan from "@/common/scan.js";
import useAudioStep from "@/hooks/useAudioStep";
const msgStore = useMsgStore(pinia);
const loginStore = useloginStore(pinia);
const { unread, sysUnread } = storeToRefs(msgStore);
const userStore = useloginStore(pinia);
const { playAudio } = useAudioStep();
export default {
  components: {
    message,
    contacts,
    discover,
    // compass,
    mine
  },
  data() {
    let navList = [
      {
        name: "message",
        title: "消息",
        notice: unread
      },
      {
        name: "friend",
        title: "人脉圈",
        path: "/pages/friend/works/works"
      },
      {
        name: "discover",
        title: "发现",
        path: 0
      },
      {
        name: "contacts",
        title: "通讯录",
        notice: sysUnread
      }
    ];
    // let compass = {
    //   name: 'compass',
    //   title: '探索',
    //   notice: 0
    // };
    // if (loginStore.globalConfig && loginStore.globalConfig.demon_mode) {
    //   navList.push(compass);
    // }
    let mine = {
      name: "mine",
      title: "我的",
      notice: 0
    };
    navList.push(mine);
    return {
      csshow: false,
      amplifiedBase: uni.getStorageSync("amplifiedBase") || 1,
      noviceGuide: uni.getStorageSync("noviceGuide") || [],
      currentGuidance: [1, 2, 3, 4, 5, 6, 7],
      isFullyContained: null,
      user: userStore.userInfo,
      globalConfig: loginStore.globalConfig,
      PageCur: "message",
      PageName: "消息",
      TabCur: 0,
      modelName: false,
      navList: navList
    };
  },
  onShow() {
    this.amplifiedBase = uni.getStorageSync("amplifiedBase") || 1;
    if (!this.noviceGuide.includes(2)) {
      playAudio(2);
    } else {
      if (!this.noviceGuide.includes(5)) {
        playAudio(5);
      }
    }
  },
  mounted() {
    // #ifndef MP
    uni.hideTabBar();
    // #endif
    // 检查本地联系人,如果没有才去请求接口
    // let contacts = uni.getStorageSync('allContacts');
    // if (!contacts.length) {
    // }

    // 监听ws状态,如果重新连接了,要更新联系人
    uni.$on("socketStatus", (e) => {
      if (e) {
        this.initContacts();
      }
    });

    this.isFullyContained = this.currentGuidance.every((item) => this.noviceGuide.includes(item));

    setTimeout(() => {
      const allContacts = uni.getStorageSync("allContacts") ?? [];
      !allContacts.length && this.initContacts();
    }, 1500);
  },
  watch: {
    modelName: {
      handler(newVal) {
        if (!newVal && !this.noviceGuide.includes(3)) {
          playAudio(3);
        }
      }
    }
  },
  methods: {
    toSearch() {
      uni.navigateTo({
        url: "/pages/index/search?type=2"
      });
    },
    hasCommonElement(arr) {
      return arr.every((item) => this.noviceGuide.includes(item));
    },
    //新手指引的步骤
    step(index) {
      const is = !this.noviceGuide.includes(index);
      const requiredSteps = Array.from(
        {
          length: index - 1
        },
        (_, i) => i + 1
      );
      const s = index === 1 || this.hasCommonElement(requiredSteps);
      return s && is;
    },
    closeModel() {
      this.modelName = false;
    },
    scan() {
      scan.scanQr();
    },
    NavChange: function (item, ind) {
      if (!this.noviceGuide.includes(ind)) {
        if (ind != 4) {
          playAudio(ind + 1);
        }
        this.noviceGuide.push(ind);
        uni.setStorageSync("noviceGuide", this.noviceGuide);
      }

      if (ind === 7) {
        this.isFullyContained = true;
      }

      if (item.path) {
        uni.navigateTo({
          url: `${item.path}?user_id=0&avatar=${this.user.avatar}&realname=${this.user.realname}`
        });
      } else {
        this.PageCur = item.name;
        this.PageName = item.title;
      }
    },
    showContacts() {
      this.TabCur == 1 ? (this.TabCur = 0) : (this.TabCur = 1);
    },
    initContacts() {
      this.modelName = "";
      Promise.all([this.$api.msgApi.initContacts(), this.$api.msgApi.getTmpContacts()]).then((res) => {
        const [contacts, tmpContacts] = res;

        //兼容处理
        const TCData = tmpContacts.data.map((item) => {
          !("unread" in item) && (item["unread"] = 0);
          !("is_notice" in item) && (item["is_notice"] = 1);
          return item;
        });

        const data = [...contacts.data, ...TCData];

        msgStore.sysUnread = contacts.count;
        msgStore.initContacts(data);
      });
      // this.$api.msgApi.initContacts().then((res) => {
      //   // 设置消息未读数和系统消息未读数
      //   msgStore.sysUnread = res.count;
      //   msgStore.initContacts(res.data);
      // });
    },
    addGroup() {
      uni.navigateTo({
        url: "/pages/index/userSelection?type=1"
      });
    },
    addFriend() {
      uni.navigateTo({
        url: "/pages/contacts/search"
      });
    },
    addModelName() {
      this.modelName = "add";

      if (!this.noviceGuide.includes(2)) {
        this.noviceGuide.push(2);
        uni.setStorageSync("noviceGuide", this.noviceGuide);
      }
    },
    search() {
      const type = this.PageCur == "message" ? 1 : 2;

      if (!this.noviceGuide.includes(1)) {
        this.noviceGuide.push(1);
        uni.setStorageSync("noviceGuide", this.noviceGuide);
      }

      uni.navigateTo({
        url: "/pages/index/search?type=" + type
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-box {
  width: 100vw;
  position: relative;
}

:deep .cu-list.menu-avatar > .cu-item::after {
  width: 0;
  height: 0;
}

:deep .cu-item-1 .content::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  bottom: -20rpx;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

:deep .cu-list.menu-avatar > .cu-item {
  background-color: transparent;
}

:deep .indexes {
  background-color: #fff;
}

.cu-dialog-hint {
  position: fixed;
  color: #fff;
  left: 1rem;
  // top: 5.5rem;
  top: calc(var(--status-bar-height) + 5.5rem);
  width: 360rpx;
  text-align: left;

  .cu-dialog-hint-tiem {
    font-size: 32rpx;
    padding: 34rpx 0 34rpx 0;
    border-bottom: 1rpx solid #f4f4f4;
  }
}

.cu-dialog-wrap {
  right: 32rpx;
  top: 176rpx;

  .cu-list.menu > .cu-item {
    padding: 34rpx 72rpx 34rpx 34rpx;
    background-color: #4c4c4c;

    text {
      color: #fff;
    }
    .padding-tb-sm {
      padding: 0;
    }
  }
}

.cu-list {
  padding-bottom: 0;
}

.cu-list .cu-item::after {
  left: 35%;
  right: 0;
  border: 2rpx solid #6f6f6f;
}

.index-nav-bg {
  background: #ededed;
  z-index: 5;
}

.txl-nav-bg {
  background: #ffffff;
  z-index: 5;
}

.index-nav {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  height: calc(var(--amplified_base) * 120rpx);
  line-height: calc(var(--amplified_base) * 120rpx);
  // padding: 10rpx 32rpx;

  .nav-left-selection {
    font-weight: 500;
    font-size: 48rpx;
    color: #000000;
  }

  .nav-left-info {
    position: absolute;
    left: 0;
    width: 100%;
    // font-size: calc(var(--amplified_base) * 42rpx);

    font-weight: bold;
    text-align: center;
  }

  .nav-in {
    position: absolute;
  }

  .nav-right {
    position: absolute;
    right: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #1a66ff;
    z-index: 5;

    // .cuIcon-add {
    //   margin-left: 68rpx;
    // }
  }
}

.search-wrap {
  box-sizing: border-box;
  position: relative;
  z-index: 4;
  background-color: #ededed;
  padding: 20rpx ;
  margin-top: -20rpx;

  .search-content {
    width: 100%;
    // margin-left: 25rpx;
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    background-color: #ffffff;
  }

  .search-wrap-text {
    color: #b1b3ba;
    margin-left: 8rpx;
  }

  :deep .cuIcon-search {
    color: #b1b3ba;
  }
}

.decorate-bg {
  pointer-events: none;
  position: fixed;
  z-index: 0;
  // top: 0;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;

  .decorate-bg-1 {
    pointer-events: none;
    width: 100%;
    height: 296rpx;
    // background: linear-gradient(90deg, #e1f1fc 0%, #f2ecfa 49%, #f8e0e0 100%);
  }

  .decorate-bg-2 {
    pointer-events: none;
    position: relative;
    top: -200rpx;
    width: 100%;
    height: 200rpx;
    // background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    opacity: 1;
  }
}

.novice-guide-location-2 {
  z-index: 999;
}

.novice-guide-location {
  background-color: rgba(0, 0, 0, 0);

  .novice-guide-operate {
    background-color: #fff;
    pointer-events: auto;
  }
}

.index-box {
  :deep .novice-guide-location-1 {
    z-index: auto !important;

    .nav-right {
      z-index: 999;
    }
  }
}

.novice-guide-location > .novice-guide-operate__zz {
  pointer-events: none;
  // opacity: 0.1;

  filter: brightness(0);
  // color: #fff;
}

.novice-guide-location-box-1 {
  position: fixed;
  width: 100%;
  // top: 200rpx;
  top: calc(var(--status-bar-height) + 200rpx);
  padding-right: 72rpx;
  z-index: 999;
  text-align: right;
}

.novice-guide-location-box {
  position: fixed;
  width: 100%;
  bottom: 140rpx;
  padding-left: 72rpx;
  z-index: 999;
}

:deep .cu-list.menu {
  position: relative;
  overflow: inherit;
}

:deep .cu-bar {
  height: auto;

  .action {
    padding: 12rpx 0;
  }
}

:deep .cu-list::after {
  width: 0;
  height: 0;
}

.nav-text-1 {
  color: #1677ff;
  margin-top: 12rpx;
}

.nav-text-2 {
  color: #333;
  margin-top: 12rpx;
}

.more-list {
  display: flex;
  align-items: center;

  .more-icon {
    width: 30rpx !important;
    margin-right: 26rpx !important;
  }
}

.ceshi {
  position: fixed;
  // top: 0%;
  top: var(--status-bar-height);
  left: 0;
  width: 100%;
  height: 100px;
  background-color: red;
  text-align: center;
  color: #fff;
  z-index: 9999;
}
</style>
